import React from 'react';
import { Form, Input, Select, InputNumber, Tabs, Button, Space, Table, Switch } from 'antd';
import { ExtendedInfo, DeviceFormValues } from '../../types/device';

interface DeviceFormProps {
  form: any;
  extForm: any;
  isEdit: boolean;
  currentDevice?: any;
  onSaveBasicInfo: () => void;
  onToggleExtInfo: (key: string, checked: boolean) => void;
  onDeleteExtInfo: (key: string) => void;
  onEditExtInfo: (info: ExtendedInfo) => void;
  extendedInfo: ExtendedInfo[];
  setAddExtInfoVisible: (visible: boolean) => void;
}

// 模拟项目数据
const projectOptions = [
  { label: '智慧工厂', value: 'factory' },
  { label: '智能建筑', value: 'building' },
  { label: '智慧城市', value: 'city' },
];

// 模拟分组数据
const groupOptions = [
  { label: '传感器组', value: 'sensor' },
  { label: '控制器组', value: 'controller' },
  { label: '网关组', value: 'gateway' },
];

// 模拟产品模板数据
const templateOptions = [
  { label: '温湿度传感器', value: 'temp-humidity' },
  { label: '光照传感器', value: 'light' },
  { label: '压力传感器', value: 'pressure' },
];

// 模拟设备协议数据
const protocolOptions = [
  { label: 'MQTT', value: 'mqtt' },
  { label: 'HTTP', value: 'http' },
  { label: 'CoAP', value: 'coap' },
];

const DeviceForm: React.FC<DeviceFormProps> = ({
  form,
  extForm,
  isEdit,
  currentDevice,
  onSaveBasicInfo,
  onToggleExtInfo,
  onDeleteExtInfo,
  onEditExtInfo,
  extendedInfo,
  setAddExtInfoVisible
}) => {
  return (
    <Tabs defaultActiveKey="basic">
      {/* 基本信息选项卡 */}
      <Tabs.TabPane tab="基本信息" key="basic">
        <Form
          form={form}
          layout="vertical"
          name="basic_info"
          initialValues={{
            project: isEdit && currentDevice ? currentDevice.project : undefined,
            deviceName: isEdit && currentDevice ? currentDevice.name : undefined,
            deviceSN: isEdit && currentDevice ? currentDevice.sn : undefined,
            protocol: isEdit && currentDevice ? currentDevice.protocol : undefined,
          }}
        >
          <Form.Item
            name="project"
            label="项目"
            rules={[{ required: true, message: '请选择项目' }]}
          >
            <Select options={projectOptions} placeholder="请选择项目" />
          </Form.Item>

          <Form.Item
            name="deviceName"
            label="设备名称"
            rules={[{ required: true, message: '请输入设备名称' }]}
          >
            <Input placeholder="请输入设备名称" />
          </Form.Item>

          <Form.Item
            name="deviceSN"
            label="设备号"
            rules={[{ required: true, message: '请输入设备号' }]}
          >
            <Input placeholder="请输入设备号" disabled={isEdit} />
          </Form.Item>

          <Form.Item name="group" label="所属分组">
            <Select options={groupOptions} placeholder="请选择所属分组" />
          </Form.Item>

          <Form.Item name="productTemplate" label="产品模板">
            <Select options={templateOptions} placeholder="请选择产品模板" />
          </Form.Item>

          <Form.Item
            name="protocol"
            label="设备协议"
            rules={[{ required: true, message: '请选择设备协议' }]}
          >
            <Select options={protocolOptions} placeholder="请选择设备协议" />
          </Form.Item>

          <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
            <Form.Item
              name="latitude"
              label="纬度"
              style={{ flex: 1 }}
            >
              <InputNumber placeholder="请输入纬度" style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item
              name="longitude"
              label="经度"
              style={{ flex: 1 }}
            >
              <InputNumber placeholder="请输入经度" style={{ width: '100%' }} />
            </Form.Item>
          </div>

          <Form.Item name="port" label="端口">
            <InputNumber min={1} max={65535} placeholder="请输入端口号" />
          </Form.Item>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '20px' }}>
            <Button type="primary" onClick={onSaveBasicInfo}>保存</Button>
          </div>
        </Form>
      </Tabs.TabPane>

      {/* 扩展信息选项卡 */}
      <Tabs.TabPane tab="扩展信息" key="extended">
        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'flex-end' }}>
          <Button
            type="primary"
            onClick={() => setAddExtInfoVisible(true)}
          >
            添加扩展信息
          </Button>
        </div>

        {/* 扩展信息列表 */}
        <Table
          columns={[
            { title: '序号1', dataIndex: 'index', key: 'index', width: 80 },
            { title: '名称2', dataIndex: 'name', key: 'name' },
            { title: '类型3', dataIndex: 'type', key: 'type' },
            {
              title: '是否启用',
              key: 'enabled',
              render: (_, record) => (
                <Switch
                  checked={record.enabled}
                  onChange={(checked) => onToggleExtInfo(record.key, checked)}
                />
              ),
            },
            {
              title: '操作',
              key: 'action',
              render: (_, record) => (
                <Space size="small">
                  <Button
                    type="text"
                    size="small"
                    onClick={() => onEditExtInfo(record)}
                  >
                    编辑
                  </Button>
                  <Button
                    type="text"
                    danger
                    size="small"
                    onClick={() => onDeleteExtInfo(record.key)}
                  >
                    删除
                  </Button>
                </Space>
              ),
            },
          ]}
          dataSource={extendedInfo}
          rowKey="key"
          pagination={false}
          bordered
        />
      </Tabs.TabPane>
    </Tabs>
  );
};



export default DeviceForm;